.x-message {
    z-index: 99999;
    position: absolute;
}

.alert {
    border-radius: 0;
    margin-bottom: 0;
    padding-top: 8px;
    padding-bottom: 8px;

    &.alert-info {
        color: #316b8e;
        background-color: #d8edf7;
        border-color: #b9d5e2;
    }

    &.alert-success {
        color: #477a40;
        background-color: #def0d7;
        border-color: #bad9ae;
    }

    &.alert-warning {
        color: #836e3a;
        background-color: #fdf8e2;
        border-color: #eae3c2;
    }

    &.alert-danger {
        color: #a74345;
        background-color: #f2dedf;
        border-color: #e4c1c3;
    }
}

@include keyframes('dialog-fadeIn') {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(200px);
    }
}

@include keyframes('dialog-fadeOut') {
    from {
        opacity: 1;
        transform: translateY(200px);
    }
    to {
        opacity: 0;
        transform: translateY(50px);
    }
}

.x-dialog {
    width: 400px;
    margin: 0 auto;
    position: relative;
    display: none;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
    color: #515151;

    &.active {
        display: block;
    }

    &.dialog-in {
        transform: translateY(200px);
    }

    &.dialog-fadeIn {
        @include animation('dialog-fadeIn' 0.3s cubic-bezier(0.18, 0.9, 0.32, 1) both);
    }

    &.dialog-fadeOut {
        @include animation('dialog-fadeOut' 0.3s cubic-bezier(0.18, 0.9, 0.32, 1) forwards);
    }

    .x-dialog-title {
        font-size: 16px;
        height: 36px;
        line-height: 36px;
        text-align: center;
    }

    .x-dialog-close {
        font-size: 20px;
        right: 10px;
        top: 3px;
        z-index: 10;
        float: right;
        position: absolute;
        cursor: pointer;

        &:hover {
            color: #ff6666;
        }
    }
    
    .x-dialog-content {
        height: 110px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
    }

    .x-dialog-btns {
        height: 50px;
        background-color: white;
        color: white;
        position: relative;

        .x-dialog-btn {
            width: 100px;
            height: 30px;
            display: block;

            &.confirm {
                background-color: #4bc1ec;
            }

            &.cancel {
                background-color: #ea9c68;
            }
        }
    }
}

.x-dialog-info {
    .x-dialog-title {
        background-color: #ECFBE6;
    }

    .x-dialog-btn {
        margin: 0 auto;
    }
}

.x-dialog-confirm {
    .x-dialog-title {
        background-color: #fdf1d8;
    }

    .x-dialog-btn {
        float: right;
        margin-right: 20px;
    }
}

.x-scrollbar {
    &::-webkit-scrollbar-track {
        background-color: #e1e4e8;
    }

    &::-webkit-scrollbar {
        background-color: #e1e4e8;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
    }
}

@include keyframes('a-dialog-fadeIn') {
    from {
        opacity: 0;
        transform: translateY(-400px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@include keyframes('a-dialog-fadeOut') {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-300px);
    }
}

.a-dialog {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    display: none;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);

    &.active {
        display: block;
    }

    &.dialog-fadeIn {
        @include animation('a-dialog-fadeIn' 0.3s cubic-bezier(0.18, 0.9, 0.32, 1) both);
    }

    &.dialog-fadeOut {
        @include animation('a-dialog-fadeOut' 0.3s cubic-bezier(0.18, 0.9, 0.32, 1) forwards);
    }

    .dialog-close {
        color: #515151;
        font-size: 26px;
        right: 10px;
        top: 0;
        position: absolute;
        cursor: pointer;
        transition: color 0.2s;

        &:hover {
            color: #ff6666;
        }
    }
}